<template>
  <el-container>
    <el-header>
      <el-form :inline="true" style="margin-top: 20px">
        <el-form-item label="关键字">
          <el-input v-model="queryObject.parameters.keyword" placeholder="关键字" clearable @clear="clearConditions" ></el-input>
        </el-form-item>
        <el-form-item label="应用ID">
          <el-input v-model="queryObject.parameters.appId" placeholder="应用ID" clearable @clear="clearConditions" ></el-input>
        </el-form-item>
        <el-form-item label="客端IP">
          <el-input v-model="queryObject.parameters.clientIp" placeholder="客端IP" clearable @clear="clearConditions" ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" v-on:click="query"></el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main>
      <el-table height="100%" :data="dataTable.result" border style="width: 100%" highlight-current-row>
        <el-table-column prop="ticketId" label="票据编号" min-width="200" show-overflow-tooltip></el-table-column>
        <el-table-column prop="appId" label="应用ID" width="100"></el-table-column>
        <el-table-column prop="displayName" label="用户" width="150"></el-table-column>
        <el-table-column prop="loginName" label="用户登录名" width="100"></el-table-column>
        <el-table-column prop="secEmail" label="邮箱" min-width="150"></el-table-column>
        <el-table-column prop="cellphone" label="手机号" width="100"></el-table-column>
        <el-table-column prop="clientIp" label="客户端IP" width="150"></el-table-column>
        <el-table-column prop="refreshToken" label="刷新令牌" width="200" show-overflow-tooltip></el-table-column>
        <el-table-column prop="accessToken" label="访问令牌" width="200" show-overflow-tooltip></el-table-column>
        <el-table-column prop="scope" label="scope" width="100"></el-table-column>
        <el-table-column prop="context" label="上下文" width="200" show-overflow-tooltip></el-table-column>
        <el-table-column prop="createTime" label="创建时间" header-align="center" align="center" width="200"></el-table-column>
        <el-table-column prop="accessExpiredTime" label="访问过期" header-align="center" align="center" width="200"></el-table-column>
        <el-table-column prop="expireTime" label="过期时间" header-align="center" align="center" width="200"></el-table-column>
        <el-table-column header-align="center" align="center" width="80" fixed="right">
          <template slot="header">
            <el-button type="text" icon="el-icon-refresh" @click="query" title="刷新" ></el-button>
          </template>
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-delete" @click="remove(scope.row)" title="删除"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer>
      <el-pagination v-on:current-change="query" :current-page.sync="queryObject.pageIndex" :page-size="queryObject.pageSize" layout="total, prev, pager, next" :total="dataTable.rowCount"></el-pagination>
    </el-footer>
  </el-container>
</template>
<script>
export default {
  data() {
    return {
      queryObject: {
        pageIndex: 1,
        pageSize: 20,
        sortFields: {
          CreateTime: true
        },
        parameters: {
          keyword: null,
          appId: null,
          clientIp: null
        }
      },
      dataTable: {
        result: [
        ],
        rowCount: 0
      }
    }
  },
  computed: {
  },
  mounted() {
    this.query();
  },
  methods: {
    query(){
      this.$service.online.authToken({ data: this.queryObject }).then(r => {
        if (r.success)
          this.dataTable = r.data;
      });
    },
    clearConditions() {
      this.query();
    },
    remove(row) {
      confirm('确认要删除所选项吗？请谨慎操作！', '警告', 'warning', () => {
        this.$service.online.removeToken({ data: {ticketId: row.ticketId, appId: row.appId }}).then((response) => {
          if (!response.success) {
            let msg = response.message || "操作失败";
            alert(msg, "消息", "error");
          }
          else{
            this.query();
          }
        });
      });
    }
  }
}
</script>